<template>
  <router-view v-slot="{ Component, route }">
    <!-- 管理后台路由不使用全局过渡动画，避免嵌套路由冲突 -->
    <component v-if="route.path.startsWith('/admin')" :is="Component" :key="route.fullPath" class="admin-component" />
    <!-- 前台页面使用过渡动画 -->
    <transition v-else :name="transitionName" :mode="transitionMode" @before-enter="beforeEnter" @enter="enter"
      @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave">
      <component :is="Component" :key="route.path" class="page-component" />
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

/**
 * 路由过渡组件
 * @description 提供页面切换动画效果
 */

const route = useRoute()

// 路由历史记录
const routeHistory = ref<string[]>([])

// 计算过渡模式
const transitionMode = computed(() => {
  // 管理后台使用更简洁的过渡，避免复杂的DOM操作
  if (route.path.startsWith('/admin')) {
    return 'out-in'
  }

  // 前台页面使用更自然的过渡
  return 'in-out'
})

// 计算过渡动画名称
const transitionName = computed(() => {
  const currentPath = route.path
  const previousPath = routeHistory.value[routeHistory.value.length - 1]

  // 更新路由历史
  if (currentPath !== previousPath) {
    routeHistory.value.push(currentPath)
    // 保持历史记录在合理范围内
    if (routeHistory.value.length > 10) {
      routeHistory.value.shift()
    }
  }

  // 判断是否为管理后台路由
  if (currentPath.startsWith('/admin')) {
    return 'admin-simple' // 使用更简单的管理后台动画
  }

  // 判断路由深度和类型
  const pathDepth = currentPath.split('/').length
  const prevPathDepth = previousPath ? previousPath.split('/').length : 1

  // 根据路由深度选择动画
  if (pathDepth > prevPathDepth) {
    return 'page-forward'
  } else if (pathDepth < prevPathDepth) {
    return 'page-backward'
  } else {
    return 'page'
  }
})

// 过渡钩子函数
const beforeEnter = (el: Element) => {
  console.log('页面进入前:', route.path)
  // 可以在这里添加进入前的逻辑
}

const enter = (el: Element, done: () => void) => {
  console.log('页面进入中:', route.path)
  // 可以在这里添加进入中的逻辑
  done()
}

const afterEnter = (el: Element) => {
  console.log('页面进入后:', route.path)
  // 可以在这里添加进入后的逻辑
}

const beforeLeave = (el: Element) => {
  console.log('页面离开前:', route.path)
  // 可以在这里添加离开前的逻辑
}

const leave = (el: Element, done: () => void) => {
  console.log('页面离开中:', route.path)

  // 添加安全检查，防止访问null的parentNode
  if (el && el.parentNode) {
    // 可以在这里添加离开中的逻辑
    done()
  } else {
    // 如果元素不存在，直接完成过渡
    console.warn('过渡元素不存在，跳过动画')
    done()
  }
}

const afterLeave = (el: Element) => {
  console.log('页面离开后:', route.path)
  // 可以在这里添加离开后的逻辑
}
</script>

<style scoped lang="scss">
@use '../assets/styles/components/_animations' as *;

.page-component {
  width: 100%;
  min-height: 100vh;
}

.admin-component {
  width: 100%;
  min-height: 100vh;
}

// 前台页面过渡动画
.page-enter-active {
  transition: all $duration-normal $ease-out;
}

.page-enter-from {
  opacity: 0;
  transform: translateY($distance-small);
}

.page-leave-active {
  transition: all $duration-fast $ease-in;
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-$distance-small);
}

// 前进动画
.page-forward-enter-active {
  transition: all $duration-normal $ease-out;
}

.page-forward-enter-from {
  opacity: 0;
  transform: translateX($distance-normal);
}

.page-forward-leave-active {
  transition: all $duration-fast $ease-in;
}

.page-forward-leave-to {
  opacity: 0;
  transform: translateX(-$distance-normal);
}

// 后退动画
.page-backward-enter-active {
  transition: all $duration-normal $ease-out;
}

.page-backward-enter-from {
  opacity: 0;
  transform: translateX(-$distance-normal);
}

.page-backward-leave-active {
  transition: all $duration-fast $ease-in;
}

.page-backward-leave-to {
  opacity: 0;
  transform: translateX($distance-normal);
}

// 管理后台过渡动画
.admin-simple-enter-active {
  transition: opacity $duration-normal $ease-out;
}

.admin-simple-enter-from {
  opacity: 0;
}

.admin-simple-leave-active {
  transition: opacity $duration-fast $ease-in;
}

.admin-simple-leave-to {
  opacity: 0;
}

// 原有的管理后台过渡动画（保留作为备用）
.admin-enter-active {
  transition: all $duration-normal $ease-out;
}

.admin-enter-from {
  opacity: 0;
  transform: translateX($distance-small);
}

.admin-leave-active {
  transition: all $duration-fast $ease-in;
}

.admin-leave-to {
  opacity: 0;
  transform: translateX(-$distance-small);
}

// 响应式动画
@media (prefers-reduced-motion: reduce) {

  .page-enter-active,
  .page-leave-active,
  .page-forward-enter-active,
  .page-forward-leave-active,
  .page-backward-enter-active,
  .page-backward-leave-active,
  .admin-enter-active,
  .admin-leave-active,
  .admin-simple-enter-active,
  .admin-simple-leave-active {
    transition: none;
  }

  .page-enter-from,
  .page-leave-to,
  .page-forward-enter-from,
  .page-forward-leave-to,
  .page-backward-enter-from,
  .page-backward-leave-to,
  .admin-enter-from,
  .admin-leave-to,
  .admin-simple-enter-from,
  .admin-simple-leave-to {
    opacity: 1;
    transform: none;
  }
}
</style>